<template>

    <div id="app">
        <el-tabs v-model="activeName" @tab-click="handleClick"  type="card">
            <el-tab-pane label="文本展示" name="first">
                <el-card style="margin-left: 200px;margin-right: 200px;padding: 30px">
                    <div style="margin-top: 50px">
                        <el-divider content-position="center"><span
                                style="font-size: 22px;font-weight: bold">数据统计</span>
                        </el-divider>
                    </div>

                    <div style="margin-top: 50px">
                        <span>注册人数:{{data.q1}}</span>
                        <span style="margin-left: 70px">正式志愿者:{{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>男:{{data.q1}}</span>
                        <span style="margin-left: 70px">女:{{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>已完成活动 : {{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>党员人数:{{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>团员人数:{{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>群众人数:{{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>有服务时长的志愿者:{{data.q1}}</span>
                    </div>
                    <div style="margin-top: 20px">
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-top: 20px">
                        <span>50小时以上的志愿者:{{data.q1}}</span>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="图表展示" name="second">
                <div id="echart" style="height: 600px"></div>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    export default {
        name: "Data",
        data() {
            return {
                data: {
                    q1: '555',
                },
                activeName: 'first',
            }
        },
        created() {

        },
        mounted() {
            let myChart = this.echarts.init(document.getElementById('echart'));
            let option = {
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        interval: 0,//横轴信息全部显示
                        rotate: 0,//-15度角倾斜显示
                    },
                    data: [
                        '注册人数',
                        '正式志愿者',
                        '男',
                        '女',
                        '已完成活动',
                        '党员人数',
                        '团员人数',
                        '团员人数',
                        '群众人数',
                        '有服务时长的志愿者',
                        '50小时以上的志愿者'
                    ]
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130, 77, 354, 55, 456],
                    type: 'bar',
                    barWidth: '40%',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ["#3398db", "#434348", "#90ed7d", "#f7a35c", "#61a0a8", "#61a0a8", "#91c7ae", "#2f4554", "#ED9751", "#DE72F7", "#1C93F7"];
                                return colorList[params.dataIndex]
                            }
                        }
                    }, label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                },]
            };
            myChart.setOption(option);
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        beforeDestroy() {

        },
        props: {},
        computed: {//计算属性

        },
    }
</script>

<style scoped>
    span, h1 {
        color: #000;
        font-size: 18px;
        font-weight: 500;
    }
</style>
